<template>
  <div>
    <table border="1" width="80%">
      <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>生日</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="stu in stuObj.records" :key="stu.id">
        <td>{{ stu.id }}</td>
        <td>{{ stu.name }}</td>
        <td>{{ stu.birthday }}</td>
        <td>{{ stu.phone }}</td>
        <td>
          <input type="button" value="删除" @click="del(stu.id)">
          <input type="button" value="修改" @click="findById(stu.id)">
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <a v-for="p in stuObj.pages" :key="p" href="javascript:void(0)" @click="findByItem(p)" style="margin-left: 10px">{{
          p
        }}</a>
    </div>
    用户名：<input type="text" v-model="paramObj.name"><br>
    其实日期：<input type="text" v-model="paramObj.startDate"><br>
    结束日期：<input type="text" v-model="paramObj.endDate"><br>
    <input type="button" value="查询" @click="findByItem(1)">
    <hr>
    <input type="button" value="添加" @click="addVisable=true">
    <div class="dialog" v-if="addVisable">
      <div class="content">
        姓名：<input type="text" v-model="addObj.name"><br>
        生日：<input type="text" v-model="addObj.birthday"><br>
        电话：<input type="text" v-model="addObj.phone"><br>
        <input type="button" value="添加" @click="add()">
      </div>
    </div>
    <div class="dialog" v-if="updateVisable">
      <div class="content">
        姓名：{{ updateObj.name }}<br>
        生日：{{ updateObj.birthday }}<br>
        电话：<input type="text" v-model="updateObj.phone"><br>
        <input type="button" value="修改" @click="update()">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      stuObj: {},
      paramObj: {},
      addVisable: false,
      updateVisable: false,
      addObj: {},
      updateObj: {}
    }
  }, created() {
    this.findByItem(1);
  },
  methods: {
    findByItem(pageNo) {
      this.paramObj.pageNo = pageNo;
      axios.get("/project/student/findByItem", {params: this.paramObj}).then(resp => {
        this.stuObj = resp.data;
      });
    },
    del(id) {
      axios.get("/project/student/del", {params: {id}}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      });
    },
    add() {
      axios.get("/project/student/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
          this.addVisable = false;
          this.addObj = {};
        }
      });
    },
    findById(id) {
      this.updateVisable = true;
      axios.get("/project/student/findById", {params: {id}}).then(resp => {
        this.updateObj= resp.data;
      });
    },
    update() {
      axios.get("/project/student/update", {params: this.updateObj}).then(resp => {

        if (resp.data =="ok") {
          this.findByItem(1);
          this.updateVisable = false;
        }
      });
    }
  }
}
</script>

<style scoped>
.dialog {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  /*background-color: antiquewhite;*/
  display: flex;
  justify-content: center;
  align-content: center;
}

.content {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 2px solid #000;
}
</style>